<template>
  <el-form label-width="120px">
    <el-form-item label="关联专题：">
      <el-transfer
        v-model="value"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入专题名称"
        :data="props.data"
        :titles="['待选择', '已选择']"
      />
    </el-form-item>
    <el-form-item label="关联优选：">
      <el-transfer
        v-model="value1"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="State Abbreviations"
        :data="props.data1"
        :titles="['待选择', '已选择']"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="$emit('changeStep', -1)"
        >上一步，填写商品属性</el-button
      >
      <el-button type="primary" @click="submit">完成，提交商品</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ApiAddProduct } from "../types";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";

// 路由
const router = useRouter();
const route = useRoute();

interface Props {
  form: IAddProductParams;
  data: Option[];
  data1: Option[];
}

// 接受父组件的值
const props = withDefaults(defineProps<Props>(), {
  form: () => ({
    name: "",
  }),
  data: () => [
    {
      label: "",
      key: 0,
      initial: "",
    },
  ],
  data1: () => [
    {
      label: "",
      key: 0,
      initial: "",
    },
  ],
});

interface Option {
  key: number;
  label: string;
  initial: string;
}

const generateData = () => {
  const data: Option[] = [];
  const states = [
    "California",
    "Illinois",
    "Maryland",
    "Texas",
    "Florida",
    "Colorado",
    "Connecticut ",
  ];
  const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    });
  });
  return data;
};

const data = ref<Option[]>(generateData());
const value = ref([]);
const value1 = ref([]);

const filterMethod = (query: any, item: any) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};

// 接受父组件的方法
const emit = defineEmits(["changeStep"]);

const submit = () => {
  ApiAddProduct({
    ...{
      albumPics: "",
      brandId: 148,
      brandName: "wolf001",
      deleteStatus: 0,
      description: "",
      detailDesc: "",
      detailHtml: "",
      detailMobileHtml: "",
      detailTitle: "",
      feightTemplateId: 0,
      giftPoint: 0,
      giftGrowth: 0,
      keywords: "",
      lowStock: 0,
      name: "客户打款就",
      newStatus: 0,
      note: "",
      originalPrice: 0,
      pic: "",
      previewStatus: 0,
      price: 0,
      productAttributeValueList: [],
      skuStockList: [],
      subjectProductRelationList: [],
      prefrenceAreaProductRelationList: [],
      productCategoryId: 238,
      productCategoryName: "123",
      productSn: "",
      promotionEndTime: "",
      promotionPerLimit: 0,
      promotionStartTime: "",
      promotionType: 0,
      publishStatus: 0,
      recommandStatus: 0,
      sale: 0,
      serviceIds: "",
      sort: 0,
      stock: 0,
      subTitle: "ads",
      unit: "",
      usePointLimit: 0,
      verifyStatus: 0,
      weight: 0,
    },
    ...props.form,
  }).then((res) => {
    if (res.code == 200) {
      emit("changeStep", 1);
      router.push("/pms/product");
    }
  });
};
</script>
<style scoped lang="less"></style>
